<template>
  <el-card class="box-card" style="width: 1180px">
    <el-form ref="form" :model="query" label-width="80px">
      <el-form-item label="平台名称">
        <el-input v-model="query.infName"></el-input>
      </el-form-item>
      <!-- <el-form-item label="头像" >
        <el-input v-model="query.infLogo" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="平台Logo" >
        <!--上传图片-->
        <el-upload
          ref="upload"
          :class="{ disUoloadSty: upload.uploadDisabled }"
          action="http://localhost:9000/system/uploadoss"
          name="file"
          list-type="picture-card"
          :on-preview="handlePreview"
          :on-progress="onProgress"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :on-change="handleChange"
          :file-list="upload.fileList"
          accept=".jpeg,.jpg,.gif,.png"
          :limit="upload.limitCountImg"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!--预览图片-->
        <el-dialog
          :modal-append-to-body="false"
          :visible.sync="upload.imgVisible"
          width="30%"
        >
          <img width="100%" :src="upload.dialogImageUrl" alt="图片未找到" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="客服热线">
        <el-input v-model="query.infTel"></el-input>
      </el-form-item>
      <el-form-item label="客服邮箱">
        <el-input v-model="query.infEmail"></el-input>
      </el-form-item>
      <el-form-item label="版权">
        <el-input v-model="query.infCopyright"></el-input>
      </el-form-item>
      <el-form-item label="用户协议">
        <el-input type="textarea" v-model="query.infAgreement"></el-input>
      </el-form-item>
      <el-form-item label="关于我们">
        <el-input type="textarea" v-model="query.infAboutUs"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
/* headphoto*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
export default {
  data() {
    return {
      query: {},
      upload: {
        // 是否禁用上传，
        uploadDisabled: false,
        // 是否显示预览图片
        imgVisible: false,
        // 预览图片url
        dialogImageUrl: "",
        // 上传的文件列表（用于在上传组件中回显图片）, 例如: [{name: 'xxx.jpg', url: 'https://xxx.com/xxx.jpg'}]
        fileList: [],
        limitCountImg: 1, //上传图片的最大数量
      },
    };
  },
  methods: {
    loadPlat() {
      this.$axios.get("/admin/system/queryPlatInf").then((res) => {
        this.query = res.data.data;
        this.upload.fileList = [{name: 'xxx.jpg', url: res.data.data.infLogo}];
      });
    },
    onSubmit() {
      this.$axios.put("/admin/system/updatePlatInf", this.query).then((res) => {
        if (res.data.code == 200) {
          alert("保存成功");
        } else {
          alert("修改失败");
        }
      });
    },
    //上传--------------------------------------------
    handleSuccess(response, file, fileList) {
      this.$message.success("图片上传成功");
      if (response.code == 200) {
        this.upload.imgVisible = true;
        this.upload.dialogImageUrl = response.data;
        this.query.infLogo = response.data; //将返回的文件储存路径赋值picture字段
      }
    },
    // 上传中
    onProgress(event, file, fileList) {
      this.upload.uploadDisabled = true;
    },
    //删除文件之前的钩子函数
    handleRemove(file, fileList) {
      this.$message.info("已删除原有图片");
      this.upload.uploadDisabled = fileList.length >= this.upload.limitCountImg;
    },
    //处理图片变化时
    handleChange(file, fileList) {
      this.upload.uploadDisabled = fileList.length >= this.upload.limitCountImg;
    },
    //点击列表中已上传的文件事的钩子函数
    handlePreview(file) {},
    //参数是上传的文件，若返回false，或返回Primary且被reject，则停止上传
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
  },
  mounted() {
    this.loadPlat();
  },
};
</script>